<template>
	<view class="share-page" :style="{ height: canvasHeight+100 + 'px' }">
		<view class="share-page-box" id="box" v-if="show"
			:style="{width: canvasWidth + 'px', height: canvasHeight + 'px' }">
			<wxml-to-canvas class="widget" :width="canvasWidth" :height="canvasHeight" />
		</view>
		<view class="share-page-box msg-box" v-else :style="{width: canvasWidth + 'px', height: canvasHeight + 'px' }">
			{{msg}}
		</view>
		<view class="share-page-btn" @tap="extraImage" v-if="shareImg">
			<button class="btn-big" style="margin: 15px 0;background: #1A66FF;color: #fff;width: 100%;padding: 5px;"
				size="mini">保存图片</button>
		</view>
		<view class="noneText" v-else>
			<text>图片已经上传到服务器</text>
		</view>
	</view>
</template>
<script>
	import config from '@/request/config.js'
	const {
		wxml,
		style
	} = require('./DomData.js')
	export default {
		name: '',
		data() {
			return {
				show: false, // 是否显示canvas
				canvasWidth: 595, // 默认canvas宽高
				canvasHeight: 842,
				screenWidth: 842, // 设备宽度
				name: '',
				pic: '',
				chapter1: '',
				chapter2: '',
				widget: null,
				msg: '加载中，请稍等...', // 提示语
				form: {
					id: '',
					report: ''
				},
				shareImg: true
			}
		},
		onLoad(options) {
			this.form.id = options.id
			this.shareImg = options.shareImg == 'false' ? false : true
			this.screenWidth = this.screenWidth
			this.canvasWidth = this.canvasWidth
			this.canvasHeight = this.screenWidth 
			this.show = true
			// 数字容器宽度 动态设置 
			setTimeout(() => {
				uni.showLoading({
					title: '图片生成中...'
				})
				this.widget = this.selectComponent('.widget')
				this.renderToCanvas()
			}, 1000)
		},
		methods: {
			// wxml 转 canvas
			renderToCanvas() {
				let setData = this.$store.state.reportDetail
				let arr = []
				setData.repair.map((item, index) => {
					let el = index + 1 + '.' + item.repair
					arr.push(el)
				})
				arr = arr.join(';')
				setData.repair = arr
				const _wxml = wxml(this.$store.state.reportDetail)
				const _style = style(this.screenWidth, this.canvasWidth, this.canvasHeight)
				const p1 = this.widget.renderToCanvas({
					wxml: _wxml,
					style: _style
				})
				p1.then((res) => {
					console.log('海报生成成功');
					uni.hideLoading()
					// this.container = res
				}).catch((err) => {
					console.log('生成失败')
				})
			},
			// 保存到朋友圈
			extraImage() {
				if (!this.show) {
					uni.showToast({
						title: '海报生成失败',
						icon: 'none'
					})
					return
				}
				const p2 = this.widget.canvasToTempFilePath()
				let that = this
				p2.then(result => {
					let path = result.tempFilePath
					const token = uni.getStorageSync('userInfo').token
					uni.uploadFile({
						url: `${config.baseUrl}/common/upload`,
						filePath: path,
						name: 'file',
						formData: {
							token: token // 上传附带参数
						},
						success: (res1) => {
							that.form.report = JSON.parse(res1.data).data.fullurl
							let imgs = JSON.parse(res1.data).data.fullurl
							this.$https.post('/warranty/edit_report', that.form).then(res => {
								uni.showToast({
									title: res.msg,
									duration: 1500,
									icon: 'none'
								})
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 1500)
							})
						},
						fail: () => {
							uni.showToast({
								title: '上传失败',
								duration: 1500,
								icon: 'error'
							})
						}
					});
					return false;
					uni.getSetting({
						success: res => {
							// 非初始化且未授权的情况，需要再次弹窗提示授权
							if (res.authSetting['scope.writePhotosAlbum'] != undefined && res
								.authSetting['scope.writePhotosAlbum'] != true) {
								uni.showModal({
									title: '是否授权相册权限',
									content: '需要获取相册权限，请确认授权，否则无法使用相关功能',
									success: res => {
										if (res.confirm) {
											uni.openSetting({
												success: dataAu => {
													if (dataAu.authSetting[
															"scope.writePhotosAlbum"
															] == true) {
																uni.showToast({
															title: '授权成功',
															icon: 'none',
															duration: 1000
														});
														that.saveIMg(path);
													} else {
														uni.showToast({
															title: '授权失败',
															icon: 'error',
															duration: 1000
														});
													}
												}
											});
										}
									}
								});
							} else {
								// 初始化且未授权，系统默认会弹窗提示授权
								// 非初始化且已授权，也会进入这里
								that.saveIMg(path);
							}
						}
					});
				})
			},
			// 保存到相册
			async saveIMg(tempFilePath) {
				uni.saveImageToPhotosAlbum({
					filePath: tempFilePath,
					success: async () => {
						uni.showModal({
							content: '图片已保存，请在相册查看！',
							showCancel: false,
							confirmText: '确定',
							confirmColor: '#333',
							success: (res) => {
								uni.navigateBack({
									//返回
									delta: 1
								});
							},
							fail: (err) => {
								console.log('err', err);
							}
						});
					},
				});
			}
		}
	}
</script>
<style>
	page {
		overflow: scroll;
	}
</style>
<style lang="scss" scoped>
	.share-page {
		background: #fff;
		position: relative;
		// overflow: hidden;
		min-height: 100vh;
		width: 650px;
		height: 1200px;
		.msg-box {
			display: flex;
			align-items: center;
			text-align: center;
			justify-content: center;
			flex-direction: column;
		}

		.share-page-box {
			margin: 40rpx auto;
			position: relative;
			overflow: hidden;
			box-shadow: 0rpx 6rpx 20rpx 6rpx rgba(0, 0, 0, 0.2);
		}

		.noneText {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #969699;
			margin: 15px 0;
		}

		.share-page-btn {
			padding: 0 20px;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
